import React, { useState } from 'react';
import { Tree } from 'antd';
import './index.css'
const { TreeNode } = Tree;

export default function MyTree() {
  const treeData = [
    {
      title: 'Node 1',
      code: '1',
      key: '1',
      children: [
        {
          title: 'Child Node 1',
          key: '2',
        },
        {
          title: 'Child Node 2',
          key: '3',
          code:'AAA'
        },
      ],
    },
    {
      title: 'Node 2',
      key: '4',
    },
    {
      title: 'Node 3',
      key: '5',
    },
    {
      title: 'Node 4',
      key: '6',
    },
  ];

  function handleDrop(info) {
    console.log('dragNode:', info.dragNode);
    console.log('dropNode:', info.dropToGap ? null : info.node);
    console.log('dropPosition:', info.dropPosition);
  }

  return (
    <div className='my-tree'>
      <Tree
        draggable
        onDrop={handleDrop}
      >
        {treeData.map(node => (
          <TreeNode title={node.title} key={node.key}>
            {node.children && node.children.map(childNode => {
              let title = (
                <div className='my-treenode'>
                  <span>{childNode.title}</span>
                  <div className='other-column'>{childNode.code}</div>
                </div>

              )
              return  <TreeNode title={title} key={childNode.key} />
              })}
          </TreeNode>
        ))}
        </Tree>      
    </div>
  );
}